<template>
    <view class="release-dynamic-container">
        <header-vue :back="true" title="发布动态" :backUrl="'/views/community/release'" bgColor="transparent"></header-vue>
        <view class="release-dynamic-box">
            <view class="editor">
                <textarea 
                    v-model="content"
                    :maxlength="maxLen"
                    placeholder="写些什么和大家分享..."
                    class="editor-textarea"
                    @input="onInput"
                />
                <view class="counter">{{ content.length }}/{{ maxLen }}</view>
            </view>

            <view class="uploader">
                <view class="thumb" v-for="(img, idx) in images" :key="img.id">
                    <image :src="img.path" mode="aspectFill" class="thumb-img"></image>
                    <view class="thumb-del" @click="removeImage(idx)">×</view>
                </view>
                <view class="add-tile" v-if="images.length < maxImages" @click="chooseImage">
                    <view class="camera-icon">
                        <u-icon name="camera" size="30" color="#666"></u-icon>
                    </view>
                    <text class="add-text">上传照片</text>
                </view>
            </view>
        </view>
        <footer-vue>
            <view class="confirm-btn" @click="postCommunityCreateEvent">确认发布</view>
        </footer-vue>
    </view>
</template>
<script>
import headerVue from '@/components/header.vue';
import footerVue from '@/components/fixed-footer/index.vue';
import { postCommunityCreate, postUploadNow } from '@/api/index.js'
export default {
    name: 'release-dynamic',
    components: {
        headerVue,
        footerVue
    },
    data() {
        return {
            content: '',
            maxLen: 1000,
            images: [],
            maxImages: 9,
            nextId: 1
        }
    },
    methods: {
        onInput() {
            if (this.content.length > this.maxLen) {
                this.content = this.content.slice(0, this.maxLen)
            }
        },
        chooseImage() {
            const remaining = this.maxImages - this.images.length
            if (remaining <= 0) return
            const that = this
            uni.chooseImage({
                count: remaining,
                sizeType: ['compressed'],
                sourceType: ['album','camera'],
                success(res) {
                    const files = (res.tempFiles || [])
                    files.forEach((item) => {
                        that.images.push(item)
                    })
                }
            })
        },
        removeImage(index) {
            this.images.splice(index, 1)
        },
        async postCommunityCreateEvent() {
            if (!this.content) {
                uni.showToast({ title: '请输入内容', icon: 'none' })
                return
            }
            uni.showLoading()
            let images = []
            for (const item of this.images) {
                const res = await postUploadNow(item.path)
                const data = JSON.parse(res.data)
                if (data.errno == 0) {
                    images.push(data.url)
                }
            }
            postCommunityCreate({
                content: this.content,
                images: images
            }).then(res => {
                if (res.errno == 0) {
                    uni.showToast({ title: '发布成功', icon: 'none' })
                    uni.redirectTo({
                        url: '/pages/main'
                    })
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.release-dynamic-container {
    width: 100%;
    height: 100%;
}
.release-dynamic-box {
    width: 100%;
    height: 100%;
    padding: 24rpx 32rpx;
    box-sizing: border-box;
}
.release-dynamic-item {
    width: 100%;
}
.release-dynamic-item-title {
    margin-bottom: 16rpx;

    text {
        font-size: 30rpx;
        color: #333;
        font-weight: 500;
    }
}
.editor {
    position: relative;
    background: #fff;
    border-radius: 16rpx;
    padding: 20rpx;
    height: 500rpx;
}
.editor-textarea {
    width: 100%;
    height: 500rpx;
    font-size: 28rpx;
    color: #333;
}
.counter {
    position: absolute;
    right: 20rpx;
    bottom: 0;
    color: #999;
    font-size: 24rpx;
    background: #FFFFFF;
}
.uploader {
    display: flex;
    flex-wrap: wrap;
    margin-top: 24rpx;
    margin-bottom: 150rpx;
}
.thumb {
    position: relative;
    width: 148rpx;
    height: 160rpx;
    border-radius: 4rpx;
    overflow: hidden;
    margin-right: 25rpx;
    margin-bottom: 20rpx;
}
.thumb:nth-child(4n) {
    margin-right: 0;
}
.thumb-img {
    width: 100%;
    height: 100%;
    display: block;
}
.thumb-del {
    position: absolute;
    right: 6rpx;
    top: 6rpx;
    width: 20rpx;
    height: 20rpx;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border-radius: 50%;
    font-size: 16rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}
.add-tile {
    width: 148rpx;
    height: 160rpx;
    border-radius: 4rpx;
    background: #F8F8F8;
    border: 2rpx dashed #ddd;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #999;
}
.camera-icon {
    width: 64rpx;
    height: 64rpx;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12rpx;
}
.add-text {
    font-size: 24rpx;
    color: #999;
}
.confirm-btn {
    width: 100%;
    height: 76rpx;
    background: linear-gradient( 90deg, #0785CF 0%, #25A4EF 100%);
    box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(7,133,207,0.1);
    border-radius: 60rpx 60rpx 60rpx 60rpx;
    font-size: 36rpx;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40rpx;
}
</style>